<template>
  <div>
    <t-card class="list-card-container">
      <t-row justify="space-between">
        <div class="left-operation-container">
          <t-button @click="refresh">刷新</t-button>
          <t-button theme="default" variant="outline" @click="clearLog"> 清除日志 </t-button>
          <p v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</p>
        </div>
        <div class="search-input">
          <!-- <t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
            <template #suffix-icon>
              <search-icon size="20px" />
            </template>
          </t-input> -->
        </div>
      </t-row>
      <t-table
        :data="data"
        :columns="COLUMNS"
        row-key="id"
        vertical-align="top"
        :hover="true"
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        @page-change="rehandlePageChange"
        @select-change="rehandleSelectChange"
      >
        <template #logLevel="{ row }">
          <t-tag v-if="row.logLevel === 'DEBUG'" theme="primary" variant="light"> DEBUG </t-tag>
          <t-tag v-if="row.logLevel === 'INFO'" theme="primary" variant="light"> INFO </t-tag>
          <t-tag v-if="row.logLevel === 'ERROR'" theme="danger" variant="light"> ERROR </t-tag>
          <t-tag v-if="row.logLevel === 'WARN'" theme="warning" variant="light"> WARN </t-tag>
          <t-tag v-if="row.logLevel === 'FATAL'" theme="danger" variant="light">FATAL </t-tag>
        </template>
        <template #op="slotProps">
          <a class="t-button-link" @click="handleClickDetail(slotProps)">详情</a>
        </template>
      </t-table>
    </t-card>

    <t-dialog
      v-model:visible="confirmVisible"
      header="确定要清空所有日志吗？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
    />

    <t-drawer v-model:visible="drawerVisible" size="large" header="日志详情" :footer="null">
      <t-form ref="form" :data="formData">
        <t-form-item label="日期" name="logDate">
          <label>{{ formData.logDate }}</label>
        </t-form-item>
        <t-form-item label="线程" name="thread">
          <label>{{ formData.thread }}</label>
        </t-form-item>
        <t-form-item label="应用类" name="logger">
          <label>{{ formData.logger }}</label>
        </t-form-item>
        <t-form-item label="级别" name="logLevel">
          <label>{{ formData.logLevel }}</label>
        </t-form-item>
        <t-form-item label="信息" name="logMessage">
          <label>{{ formData.logMessage }}</label>
        </t-form-item>
        <t-form-item label="异常信息" name="exceptionData">
          <label>{{ formData.exceptionData }}</label>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SystemLogInfo',
};
</script>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { getLogList, clearSysLog, deleteSysLog } from '@/api/log';
import { COLUMNS } from './constants';

const data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData = async (paginationInfo: any) => {
  dataLoading.value = true;
  try {

    const { current, pageSize } = paginationInfo;
    const {items,totalItems,currentPage}=await getLogList(current, pageSize);
  
    data.value = items;
    pagination.total = totalItems;
    pagination.current = currentPage;
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData(pagination);
};
// 清除日志
const onConfirmDelete = async () => {
  try {
    confirmVisible.value = false;
    await clearSysLog();
    selectedRowKeys.value = [];
    await fetchData(pagination);

    MessagePlugin.success('删除成功');
  } catch (e) {
    console.log(JSON.stringify(e));
  }
};
const clearLog = async () => {
  if (selectedRowKeys.value.length === 0) {
    confirmVisible.value = true;
  } else {
    deleteSysLog(selectedRowKeys.value);
    selectedRowKeys.value = [];
    await fetchData(pagination);

    MessagePlugin.success('删除成功');
  }
};

const rehandlePageChange = (pageInfo: any) => {
  console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData(pageInfo);
};

const rehandleSelectChange = (val: number[]) => {
  selectedRowKeys.value = val;
};
// 详情
const formData = reactive({
  logDate: '',
  thread: '',
  logLevel: '',
  logger: '',
  logMessage: '',
  exceptionData: '无',
});
const handleClickDetail = (obj: any) => {
  drawerVisible.value = true;
  formData.logDate = obj.row.logDate;
  formData.thread = obj.row.thread;
  formData.logLevel = obj.row.logLevel;
  formData.logger = obj.row.logger;
  formData.logMessage = obj.row.logMessage;
  formData.exceptionData = obj.row.exceptionData;
};

onMounted(async () => {
  await fetchData({
    current: pagination.current,
    pageSize: pagination.pageSize,
  });
});

const deleteIdx = ref(-1);
const confirmBody = computed(() => {
  if (deleteIdx.value > -1) {
    return `删除后，所有日志信息将被清空，且无法恢复`;
  }
  return '';
});

const resetIdx = () => {
  deleteIdx.value = -1;
};

const onCancel = () => {
  resetIdx();
};
</script>

<style lang="less" scoped>
@import '@/style/variables';

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 6px 0;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}
</style>
